<template>
	<view class="content">
		<view class="backGround"
			:style="{background: `url(${imgaeUrl('/static/bg.png')})`}">
			<view v-bind:style="{height: (s+n) +'px'}" class="position-fixed width-100"
				style="top: 0; overflow: hidden; z-index: 9999;">
				<view class="backGround"
					:style="{background: `url(${imgaeUrl('/static/bg.png')})`}">
					<view v-bind:style="{height: s+'px' }" />
					<view v-bind:style="{height: n+'px' }" class="display-flex center align-items">
						<view v-bind:style="{height: h+'px' }" style="width: 690rpx;"
							class=" display-flex space-between align-items">
							<view @click="navigateBack()" class="margin-top-05">
								<uv-icon name="arrow-left" color="#333333" size="20"></uv-icon>
							</view>
							<view class="font-size-32 font-weight-500">
								数据中心
							</view>
							<view style="width: 20px;" class="margin-top-05">

							</view>
						</view>
					</view>
				</view>
			</view>
			<view :style="{height: (s+n) +'px'}">
			</view>
			<view class="padding-about-24 margin-top-20">
				<view class="balance-section" :style="{background: `url(${imgaeUrl('/static/home/tdbg.png')})`}">
					<view style="padding:32rpx;">
						<view class="display-flex space-between">
							<view class="可提现余额 (元)">
								<view class="font-size-24 color-FFF">
									可提现余额 (元)
								</view>
								<text class=" font-size-54 color-FFF font-weight-bold">800</text>
							</view>
							<view class="display-flex ">
								<view class="font-size-22	 margin-right-10 color-FFF">
									结算明细
								</view>
								<view class="margin-top-05">
									<uv-icon name="arrow-right" color="#FFFFFF" size="12"></uv-icon>
								</view>
							</view>
						</view>
						<view class="display-flex margin-top-40 space-between ">
							<view class="display-flex flex-direction-column ">
								<text class=" font-size-36 color-FFF font-weight-bold">800</text>
								<view class="font-size-24 color-FFF">
									本月预计到账
								</view>
							</view>
							<view class="display-flex flex-direction-column ">
								<text class=" font-size-36 color-FFF font-weight-bold">800</text>
								<view class="font-size-24 color-FFF">
									下月预计到账
								</view>
							</view>
							<view class="display-flex flex-direction-column">
								<text class=" font-size-36 color-FFF font-weight-bold">800</text>
								<view class="font-size-24 color-FFF">
									待结算收益
								</view>
							</view>
						</view>
						<view style="background: rgba(255, 255, 255, 0.5);padding: 14rpx 20rpx;border-radius: 30rpx;"
							class="display-flex margin-top-40 space-between align-items">
							<view class="display-flex align-items">
								<uv-icon name="info-circle" color="#FFFFFF" size="12"></uv-icon>
								<view class="font-size-24 margin-left-10 color-FFF">
									每月16日后可提现上月已结算收益
								</view>
							</view>
							<view class="display-flex ">
								<view class="font-size-22 margin-right-10 color-FFF">
									查看详情
								</view>
								<view class="margin-top-05">
									<uv-icon name="arrow-right" color="#FFFFFF" size="12"></uv-icon>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="">

				</view>
				<view class="">

					<view class="view ">
						<view class="display-flex space-between">
							<view style="width: 36%;padding-top: 14rpx;" class="font-size-28 font-weight-500">
								订单数据
							</view>
							<view class="file-1">
								<uv-tabs :list="tabslist" lineWidth="15"
									lineColor="linear-gradient( 270deg, #FE6740 0%, #FE8B1D 100%)" :activeStyle="{
																color: '#262626',
																fontWeight: '500',
																transform: 'scale(1.05)',
																fontSize:'24rpx'
													    	}" :inactiveStyle="{
																color: '#7C7C7C',
																transform: 'scale(1)',
																fontSize:'24rpx'
															}" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"></uv-tabs>
							</view>
						</view>
						<view class="display-flex margin-top-40 space-between ">
							<view class="display-flex flex-direction-column center align-items">
								<text class=" font-size-32  font-weight-bold">800</text>
								<view class="font-size-24 margin-top-10" style="color: #979797;">
									订单笔数
								</view>
							</view>
							<view class="display-flex flex-direction-column center align-items">
								<text class=" font-size-32  font-weight-bold">800</text>
								<view class="font-size-24 margin-top-10" style="color: #979797;">
									预估收益
								</view>
							</view>
							<view class="display-flex flex-direction-column center align-items">
								<text class=" font-size-32  font-weight-bold">800</text>
								<view class="font-size-24 margin-top-10" style="color: #979797;">
									分享次数
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onReachBottom
	} from '@dcloudio/uni-app';
	import {
		imgaeUrl,
		nativeUI,
		navigateTo,
		navigateBack
	} from '@/utils/index.js';
	import * as api from '@/request/app.js'; // 引入api 方法
	import local from '@/utils/localStorage.js'; //引入本地存储方法
	const s = ref(getApp().globalData.s); //计算高度
	const n = ref(getApp().globalData.n); //计算胶囊
	const h = ref(getApp().globalData.h); //计算胶囊
	const tabslist = ref([{
		name: '今日'
	}, {
		name: '昨日',
	}, {
		name: '本月'
	}, {
		name: '上月',
	}])
	onLoad(function(option) {});
	onShow(function() {});
	onReady(function() {});
	onReachBottom(function() {});
</script>

<style scoped lang="scss">
	.balance-section {
		width: 702rpx;
		height: 394rpx;
		background-size: 100% 100% !important;
		background-repeat: no-repeat;
	}

	.view {
		padding: 24rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}

	.backGround {
		width: 750rpx;
		height: 452rpx;
		background-size: 100% 100% !important;
		background-repeat: no-repeat;
	}
</style>